<template>
    <div>
          <el-form-item>
          <el-button type="danger" :icon="Plus" @click="onSubmit()">新增</el-button>
          <!-- <el-button type="danger" @click="">保存</el-button>
          <el-button type="danger" @click="">撤销</el-button> -->
          <el-button type="danger" :icon="Delete" @click="">删除</el-button>
        </el-form-item>

        <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item label="期初日期:">
                {{form[0].openingDate}}
              </el-form-item>
        <el-form-item label="单据号：" style="width: 150px">-- --</el-form-item>
        <el-form-item label="流水号：" style="width: 150px">-- --</el-form-item>
      </el-form>
      <hr style="height:3px; background-color:indianred">

      <!-- 公猪期初信息表头 -->
      <div>
        <table class="bordered-table" width="100%" >
          <tr height="40" style="background-color:antiquewhite">
              <td width="150">序号</td>
              <td width="150">耳号</td>
              <td width="150">栋舍</td>
              <td width="150">栏位</td>
              <td width="150">只数(默认不能修改)</td>
              <td width="150">重量(公斤)</td>
          </tr>
          <tr v-for="(item,index) in form" :key="index">
              <td width="150" >
                <el-input :value="index+1"></el-input>
              </td>
              <td width="150">
                <el-select v-model="item.basicInforId" placeholder="请选择" clearable>
                    <el-option
                    v-for="basic in BasicInformationList.filter((d:any)=>d.gender==1&&d.pigTypeId==1 && d.presentstatus==1)"
                    :key="basic.basicInforId"
                    :label="basic.earNumber"
                    :value="basic.basicInforId">
                    </el-option>
                </el-select>
              </td>
              <td width="150">
                <el-select v-model="item.bedroomId" placeholder="请选择" @change="handlefield(item.bedroomId,index)" clearable>
                    <el-option v-for="bedroom in bedroomList" :key="bedroom.bedroomId" :label="bedroom.bedroomName" :value="bedroom.bedroomId" />
                </el-select>
            </td>
            <td width="150">
                <el-select v-model="item.fieldId" placeholder="请选择" clearable>
                    <el-option v-for="field in fieldList[index]" :key="field.fieldId" :label="field.fieldName" :value="field.fieldId" />
                </el-select>
            </td>
              <td width="150">
                  <el-input v-model="item.pigNumber" disabled="true"></el-input>
              </td>
              <td width="150">
                  <el-input v-model="item.weight"></el-input>
              </td>
          </tr>
          </table>
      </div>
      <el-button type="danger" link :icon="Plus" @click="AddRow()">增行</el-button>
      <el-button type="danger" link  @click="delRow()" :disabled="form.length<=0">—减行</el-button>
      </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
onMounted(() => {
  GetBasicInformation();
  handleBedroom();//栋舍
})

//当前时间
const date=new Date();

//公猪添加
const form = ref<any>([{
    documentNumber:'',
    serialNumber:'',
    openingDate:date.getFullYear()+'-'+(date.getMonth()+1).toString().padStart(2, '0')+'-'+ date.getDate().toString().padStart(2, '0'),
    basicInforId: '',
    bedroomId: '',
    fieldId: '',
    pigNumber: 1,
    weight: '',
    isInfancies: false,
    createdOwner: localStorage.getItem("userName"),
    createdTime:new Date(),
    updateOwner:'',
    updatedTime: null,
    examineOwner: '',
    examineTime: null,
}])
//新增行
const AddRow = () => {
    form.value.push({
        documentNumber:'',
        serialNumber:'',
        openingDate:date.getFullYear()+'-'+(date.getMonth()+1).toString().padStart(2, '0')+'-'+ date.getDate().toString().padStart(2, '0'),
        basicInforId: '',
        bedroomId: '',
        fieldId: '',
        pigNumber: 1,
        weight: '',
        isInfancies: false,
        createdOwner: localStorage.getItem("userName"),
        createdTime:new Date(),
        updateOwner:'',
        updatedTime: null,
        examineOwner: '',
        examineTime: null,
    })
    console.log(form.value);
};

//减行
const delRow = () => {
    if(form.value.length>0)
    {
        form.value.pop();
    }
};
//公猪期初添加
const onSubmit = () => {
    console.log(form.value);
    const obj={
        infancies:form.value
    }
    axios.post(apiBedinUrl+'/api/Infancies/AddInfancies',obj)
    .then(res=>{
        if(res.data.code==0)
        {
            console.log("公猪期初添加",res.data);
            ElMessage.success('公猪期初添加成功');
            delRow();
            router.push("/ShowInfancies");
        }
        else{
            ElMessage.error('公猪期初添加失败');
            return;
        }
    })
}

//猪只信息耳号列表
const BasicInformationList=ref([]);
const GetBasicInformation=()=>{
    axios.post(apiBedinUrl+'/api/Infancies/GetBasicInformation',{})
    .then(res=>{
        console.log("猪只信息耳号",res.data.data);
        BasicInformationList.value = res.data.data;
    })
}

//响应式数据 获取栋舍
const condition=reactive({
    pageIndex:1,
    pageSize:100,
    bedroomTypeId:0,
    bedroomName:'',
    personName:''
})
//获取栋舍
const bedroomList:any=ref([])
const handleBedroom=()=>{
    axios.post(apiUrl+'/api/BedRoom/ShowBedroom',{
        pageIndex: condition.pageIndex,
        pageSize: condition.pageSize,
        bedroomTypeId: condition.bedroomTypeId,
        bedroomName: condition.bedroomName,
        personName:condition.personName
    }).then(res=>{
        bedroomList.value=res.data.data.list
    })
}

//获取栏位
const fieldList:any=ref([])
const handlefield=(id:number,index:number)=>{
    form.value[index].fieldId=''
    axios.post(apiUrl+'/api/BedRoom/GetBrdroomIdField',{
        bedroomId:id
    }).then(res=>{
        fieldList.value[index]=res.data.data;
        console.log("栏位",fieldList.value[index],index);
    })
}

</script>

<style scoped>
.bordered-table {
  border-collapse: collapse; /* 合并相邻单元格的边框 */
  width: 100%;
}

.bordered-table th,
.bordered-table td {
  border: 1px solid rgb(41, 41, 41); /* 为表头和表格单元格添加边框 */
  padding: 8px; /* 可选，为单元格内容添加内边距 */
  text-align: center; /* 可选，设置单元格内容的对齐方式 */
}

.bordered-table tr:first-child th {
  border-bottom: 2px solid black; /* 可选，为表头添加更粗的底部边框 */
}
</style>
